<html>

<head>
    <title>OpenGlobus - Earth planet</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../css/og.css" type="text/css" />
</head>

<body>
    <div id="globus" style="width:100%;height:100%"></div>
    <script type="module">

        'use strict';

        import { Entity } from '../../src/og/entity/Entity.js';
        import { Globe } from '../../src/og/Globe.js';
        import { GlobusTerrain } from '../../src/og/terrain/GlobusTerrain.js';
        import { LonLat } from '../../src/og/LonLat.js';
        import { Vector } from '../../src/og/layer/Vector.js';
        import { XYZ } from '../../src/og/layer/XYZ.js';
        import { random } from '../../src/og/math.js';

        const osm = new XYZ("OpenStreetMap", {
            specular: [0.0003, 0.00012, 0.00001],
            shininess: 20,
            diffuse: [0.89, 0.9, 0.83],
            isBaseLayer: true,
            url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            visibility: true,
            attribution: 'Data @ OpenStreetMap contributors, ODbL'
        });

        const pointLayer = new Vector("points", {
            'relativeToGround': true,
            'visibility': true
        });

        const globe = new Globe({
            "target": "globus",
            "name": "Earth",
            "terrain": new GlobusTerrain(),
            "layers": [osm, pointLayer]
        });

        function createCircle(ellipsoid, center, radius = 300) {
            let circleCoords = [];
            for (let i = 0; i < 360; i += 5) {
                circleCoords.push(ellipsoid.getGreatCircleDestination(center, i, radius));
            }
            return circleCoords;
        };

        function createCircles(outPathLonLat, outPathColors, num = 80) {
            let ell = globe.planet.ellipsoid;
            for (let i = 0; i < num; i++) {
                let center = new LonLat(random(8.08, 8.31), random(46.7, 46.8));
                let circle = createCircle(ell, center, random(100, 1000));
                outPathLonLat.push(circle);

                let color = [random(), random(), random()];
                outPathColors.push([color]);
            }
        }

        let pathLonLat = [],
            pathColors = [];

        createCircles(pathLonLat, pathColors);

        const polylineEntity = new Entity({
            'polyline': {
                'pathLonLat': pathLonLat,
                'pathColors': pathColors,
                'thickness': 3.3,
                'isClosed': true
            }
        });

        pointLayer.addEntities([polylineEntity]);

        globe.planet.viewExtentArr([8.08, 46.72, 8.31, 46.75]);

    </script>
</body>

</html>